<template>
  <ActionPanel>
    <ElTable :data="data">
      <ElTableColumn prop="name" label="名称">
        <template #="{ row }">
          <ElInput v-model="row.name" />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="type" label="类型">
        <template #="{ row }">
          <ElSelect v-model="row.type">
            <ElOption v-for="(value, key) in columnTypeOptions" :label="value" :value="key" :key="key" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="标签">
        <template #="{ row }">
          <ElInput v-model="row.label" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="注释">
        <template #="{ row }">
          <ElInput v-model="row.comment" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="选项">
        <template #="{ row }">
          <OptionsEditor v-model="row.options" :disabled="row.type !== 'enum'" />
        </template>
      </ElTableColumn>
      <ElTableColumn :width="60">
        <template #header>
          <ElButton type="primary" size="small" link @click="add">新增</ElButton>
        </template>
        <template #="{ $index }">
          <ElButton type="danger" size="small" link @click="remove($index)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn } from 'element-plus'
  import { getSeed } from '@/views/seed-dev'
  import { inject, ref } from 'vue';
  import { columnTypeOptions } from '@/views/types';
  import feedback from '@/utils/feedback';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { OptionsEditor } from '../../OptionsEditor';

  const props = defineProps<{seedName: string}>()

  function add() {
    data.value.push({})
  }

  function remove(index: number) {
    data.value.splice(index, 1)
  }

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    for(const i in data.value) {
      const column = data.value[i]
      const name = column.name
      if (!name) {
        feedback.alertError(`第${parseInt(i) + 1}行名称不能为空`)
        return false
      }

      const seed = getSeed(props.seedName)
      const columns = seed.columns
      if(!columns) return true

      // if(Object.keys(columns).includes(name)) {
      //   feedback.alertError(`列【${name.value}】已存在`)
      //   return false
      // }
    }

    return true
  }

  const data = ref<any[]>(getInitData())
  function getInitData() {
    const columns = getSeed(props.seedName).columns
    if(!columns) return []

    const ret = []
    for(const columnName in columns) {
      ret.push({...columns[columnName], name: columnName})
    }

    return ret
  }

  function doSave() {
    if(!validate() || data.value.length === 0) return

    const columns = {}
    for(const column of data.value) {
      const name = column.name
      delete column.name
      columns[name] = { ...column }
    }

    const seed = getSeed(props.seedName)
    seed.columns = columns

    close?.()
  }
  
</script>